<template>
	<view class="container" style="padding: 20rpx 30rpx;">
		<mx-navbar :title="'优惠券详情'" :background="'#fff'" text_color="#000"></mx-navbar>

		<view class="body">
			<view class="user-box">
				<view class="ctop">
					{{ cp_info.name }}
				</view>
				<view class="num">
					{{ parseFloat(cp_info.denomination) || 0}}
					<text class="num-txt" v-if="cp_info.type == 1">元</text>
					<text class="num-txt" v-if="cp_info.type == 2">折</text>
				</view>
				
				<view class="qrcode">
					<canvas canvas-id="memberCode" style="width: 400rpx; height: 400rpx;"></canvas>
				</view>
				<view class="tip">
					{{cp_info.code}}
				</view>
			</view>
		</view>
		<view class="content" >
			<view class="desc" v-html="cp_info.data">
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import uQRCode from '@/common/uqrcode'
	
	const {
		proxy
	} = getCurrentInstance()
	const cp_info = ref({})
	
	const data = reactive({
		code: ''
	})
	
	onLoad((options) => {
		data.code = options.code || ''
	})
	
	onShow(() => {
		getData()
	})

	async function getData() {
		if(!data.code) return proxy.$toast('参数错误')
		let res = await proxy.$api('UserCouponDetail', {
			code: data.code
		})
		if (res.code == 0) {
			cp_info.value = res.data
			proxy.$nextTick(() => {
				makeMemberCode()
			})
		}
	}

	function makeMemberCode(i) {
		uQRCode.make({
			canvasId: 'memberCode',
			text: `${cp_info.value.code}`,
			size: uni.upx2px(400),
			margin: 10,
			backgroundColor: '#ffffff',
			foregroundColor: '#000000',
			fileType: 'jpg',
			correctLevel: uQRCode.defaults.correctLevel,
			success: res => {
				console.log(res)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.body{
		padding-top: 100rpx;
	}
	.user-box {
		width: 100%;
		position: relative;
		border-radius: 8rpx;
		background-color: #ffffff;
		margin-top: -75rpx;
		padding-top: 45rpx;
		padding-bottom: 35rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	}

	.qrcode{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.ctop{
		font-size: 28rpx;
		text-align: center;
		color: #666;
	}
	
	.tip{
		font-size: 28rpx;
		color: #000;
		text-align: center;
	}
	.num{
		margin-top: 10rpx;
		font-size: 64rpx;
		font-weight: bolder;
		color: $main_color;
		text-align: center;
		letter-spacing: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		.num-txt{
			font-size: 40rpx;
			position: relative;
			top: 4rpx;
			padding-left: 10rpx;
		}
	}
	
	.content {
		// background-color: #fff;
		padding: 20rpx;
		border-top: 1px solid $bg;
		color: #666;
		font-size: 26rpx;
		line-height: 1.6;
		border-radius: 24rpx;
	}
</style>